<template>
  <div class="app-container">
    <!-- 主体 start -->

    <el-container>
      <el-main height>
        <div><el-button type="primary" @click="addList">添加</el-button></div>
        <!-- 表格 start -->
        <el-table v-loading="loading" border :data="list" style="width: 100%; margin-top: 30px">
          <el-table-column align="center" prop="Title" label="标题" />
          <el-table-column align="center" prop="MaxValue" label="最大值" />
          <el-table-column align="center" prop="MinValue" label="最小值" />
          <el-table-column align="center" prop="MonthProfit" label="收益百分百" />

          <el-table-column align="center" prop="Remarks" label="备注" />
          <el-table-column align="center" prop="CreateTime" label="创建时间" />
          <el-table-column align="center" label="操作" width="280px">
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click="showPupop(scope.row)">修改</el-button>
              <el-button type="primary" size="mini" @click="sonListSelect(scope.row)">查看</el-button>
              <el-button type="danger" size="mini" @click="strategtDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 20px">
          <!--          <el-pagination
            :current-page="search.CurrentPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="search.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.TotalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /> -->
        </div>
        <!-- 表格 end -->
      </el-main>
    </el-container>
    <!-- 主体 end -->
    <!-- 查看弹窗 start -->
    <el-dialog title="添加策略" :visible.sync="pupopState" :close-on-click-modal="false" class="edit-form">
      <el-form label-width="100px">
        <el-form-item label="标题 "><el-input v-model="addStra.Title" placeholder="请输入标题" clearable :style="{ width: '100%' }" /></el-form-item>
        <el-form-item label="最小值 "><el-input v-model="addStra.MinValue" placeholder="请输入最小值,单位：USDT " clearable :style="{ width: '100%' }" /></el-form-item>
        <el-form-item label="最大值 "><el-input v-model="addStra.MaxValue" placeholder="请输入最大值,单位：USDT " clearable :style="{ width: '100%' }" /></el-form-item>
        <el-form-item label="月收益 "><el-input v-model="addStra.MonthProfit" placeholder="请输入月收益(百分比)" clearable :style="{ width: '100%' }" /></el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addStra.Remarks" type="textarea" placeholder="请输入备注" :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pupopState = false">关 闭</el-button>
        <el-button type="primary" @click="config">确 认</el-button>
      </span>
    </el-dialog>
    <el-dialog title="策略信息" width="80%" :visible.sync="sonShow" :close-on-click-modal="false" class="edit-form">
      <div><el-button type="primary" @click="addCurrenBtn">添加币种</el-button></div>
      <el-table v-loading="loading" border :data="sonList" style="width: 100%; margin-top: 30px">
        <el-table-column align="center" prop="Currency" label="币种" />
        <el-table-column align="center" prop="OrderQuantity" label="做单数量" />
        <el-table-column align="center" prop="ProfitStopRatio" label="止盈比例" />
        <el-table-column align="center" prop="ProfitStopCallback" label="止盈回调" />
        <el-table-column align="center" prop="MarginLoss" label="补仓跌幅" />
        <el-table-column align="center" prop="MakeUpCallBack" label="补仓回调" />
        <el-table-column align="center" prop="FirstPurchase" label="首单额度" />
        <el-table-column align="center" prop="Remarks" label="备注 " />
        <el-table-column align="center" prop="CreateTime" label="创建时间" />
        <el-table-column align="center" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="currupdata(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="currDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 20px">
        <!-- <el-pagination
          :current-page="sonPage.CurrentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="sonPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.TotalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /> -->
      </div>
    </el-dialog>
    <el-dialog title="添加策略" :visible.sync="addCurrencyprop" :close-on-click-modal="false" class="edit-form">
      <el-form label-width="100px">
        <el-form-item label="币种 ">
          <el-select v-model="restaurantsText" :disabled="addcur.Id != 0" multiple placeholder="请选择" :style="{ width: '100%' }">
            <el-option v-for="item in restaurants" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="做单数量 "><el-input v-model="addcur.OrderQuantity" placeholder="请输入做单数量 " clearable :style="{ width: '100%' }" /></el-form-item>
        <el-form-item label="止盈比例"><el-input v-model="addcur.ProfitStopRatio" placeholder="请输入止盈比例 " clearable :style="{ width: '100%' }" /></el-form-item>
        <el-form-item label="止盈回调"><el-input v-model="addcur.ProfitStopCallback" placeholder="请输入止盈回调" clearable :style="{ width: '100%' }" /></el-form-item>
        <el-form-item label="补仓跌幅"><el-input v-model="addcur.MarginLoss" placeholder="请输入补仓跌幅" clearable :style="{ width: '100%' }" /></el-form-item>
        <el-form-item label="补仓回调"><el-input v-model="addcur.MakeUpCallBack" placeholder="请输入补仓回调" clearable :style="{ width: '100%' }" /></el-form-item>
        <el-form-item label="首单额度"><el-input v-model="addcur.FirstPurchase" placeholder="请输入首单额度" clearable :style="{ width: '100%' }" /></el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addcur.Remarks" type="textarea" placeholder="请输入备注" :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCurrencyprop = false">关 闭</el-button>
        <el-button type="primary" @click="addCurrConfirm">确 认</el-button>
      </span>
    </el-dialog>
    <!-- 查看弹窗 end -->
  </div>
</template>

<script>
import { GetTjStrategy, addStrategy, GetTjCurrency, addStrategyCurrency, DelTjStrategy, DelTjCurrency } from '../../api/strategy'
import { GetCurrencyList } from '../../api/type'
export default {
  data() {
    return {
      // 表格参数
      loading: true,
      list: [],
      search: {
        CurrentPage: 1,
        pageSize: 10,
        CurrencyName: ''
      },

      // 弹窗参数
      pupopState: false,
      row: {},
      addStra: {
        Title: '',
        MinValue: '',
        MaxValue: '',
        MonthProfit: '',
        Remarks: '',
        Id: 0,
        Remarks: ''
      },

      sonList: [], // 策略列表,
      straInfo: [],
      sonShow: false, // 策略列表对话框
      sonPage: {
        CurrentPage: 1,
        pageSize: 10
      },

      // 币种
      addCurrencyprop: false,
      addcur: {
        TjStrategyId: 0,
        Currency: '',
        ProfitStopRatio: '',
        ProfitStopCallback: '',
        MarginLoss: '',
        MakeUpCallBack: '',
        FirstPurchase: '',
        Id: 0,
        Remarks: ''
      },
      restaurantsText: [],
      restaurants: []
    }
  },
  watch: {},
  mounted() {
    // this.restaurants = this.loadAll();
    GetCurrencyList({ PageSize: 9999, CurrentPage: 1 }).then(res => {
      if (res.Code == 200) {
        res.Data.List.forEach(e => {
          e.value = e.Currency
          this.restaurants.push(e)
        })
      }
    })
  },
  created() {
    this.getList()
  },
  methods: {
    handleSelect() {},
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    seacrhBtn() {
      this.search.CurrentPage = 1
      this.getList()
    },
    // 获取数据
    getList() {
      this.loading = true
      GetTjStrategy(this.search).then(res => {
        if (res.Code == 200) {
          this.list = res.Data
          this.loading = false
        }
      })
    },

    //
    addCurrenBtn() {
      console.log(this.straInfo)
      this.addcur = {
        TjStrategyId: 0,
        Currency: '',
        ProfitStopRatio: '',
        ProfitStopCallback: '',
        MarginLoss: '',
        MakeUpCallBack: '',
        FirstPurchase: '',
        Id: 0,
        Remarks: ''
      }
      this.addcur.TjStrategyId = this.straInfo.Id
      this.addCurrencyprop = true
    },
    // 添加
    addCurrConfirm() {
      const data = []
      this.restaurantsText.forEach((e, index) => {
        const resta = {
          Currency: e,
          TjStrategyId: this.addcur.TjStrategyId,
          ProfitStopRatio: this.addcur.ProfitStopRatio,
          ProfitStopCallback: this.addcur.ProfitStopCallback,
          MarginLoss: this.addcur.MarginLoss,
          MakeUpCallBack: this.addcur.MakeUpCallBack,
          TjStrategyId: this.addcur.MakeUpCallBack,
          FirstPurchase: this.addcur.FirstPurchase,
          Id: this.addcur.Id,
          // Id:  this.addcur.Id,
          Remarks: this.addcur.Remarks
        }
        data.push(resta)
        console.log(this.addcur)
        if (index + 1 >= this.restaurantsText.length) {
          this.forAddData(data)
        }
      })
    },
    // 循环结束后添加
    forAddData(data) {
      addStrategyCurrency(data).then(res => {
        if (res.Code == 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.addCurrencyprop = false
          this.getCurrList()
        }
      })
    },
    // 点击币种修改
    currupdata(row) {
      this.addcur = row
      this.addcur.TjStrategyId = this.straInfo.Id
      this.restaurantsText = []
      this.restaurantsText.push(row.Currency)
      this.addCurrencyprop = true
    },
    // 确认修改
    config() {
      addStrategy(this.addStra).then(res => {
        if (res.Code == 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.pupopState = false
          this.getList()
        }
      })
    },
    // 初始化数据
    sonListSelect(row) {
      this.straInfo = row
      this.getCurrList()
    },
    getCurrList() {
      GetTjCurrency({ TjStrategyId: this.straInfo.Id }).then(res => {
        this.sonList = res.Data
        this.sonShow = true
      })
    },
    // 删除某币种
    currDelete(row) {
      DelTjCurrency({ id: row.Id }).then(res => {
        if (res.Code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getCurrList()
        }
      })
    },
    // 删除某币种
    strategtDelete(row) {
      DelTjStrategy({ id: row.Id }).then(res => {
        if (res.Code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getList()
        }
      })
    },
    // 添加推荐策略
    addList() {
      this.addStra = {}
      this.pupopState = true
    },
    // 修改状态
    updataUserState(row, data) {
      const title = data ? '已显示' : '已隐藏'
      const upData = {
        id: row.Id,
        state: row.State
      }
      UpdateCurrency(upData).then(res => {
        if (res.Code == 200) {
          this.$message({
            message: title,
            type: 'success'
          })
        }
      })
    },
    // 弹窗
    showPupop(row) {
      this.addStra = row
      this.pupopState = true
    },
    handleSizeChange(val) {
      this.search.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.search.CurrentPage = val
      this.getList()
    }
  }
}
</script>
<style>
.box {
	border: 1px solid #ccc;
	padding: 10px 0;
	margin-top: 20px;
}
.title {
	font-weight: bold;
	margin-left: 20px;
	font-size: 20px;
	padding: 20px 0;
}
</style>
